<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/element.css">
<style>
    .item-list{
        display: block;
        background-color: #fff;
        min-width: 800px;
        min-height: 400px;
    }
    .item{
        border-bottom: 1px solid #999aaa;
        margin: 5px;
        padding: 5px;
        color: #4f4f4f;
    }
    .item-title{
        display: block;
        font-size: 24px;
        font-weight: 400;
    }
    .item-tag{

    }
    .item-title-time{
        float: right;
        font-size: 18px;
    }
    .item-channel{
        font-size: 16px;
    }
    .item-content{
        margin:5px 0 5px 0;
        display: block;
        font-size: 18px;
    }
    .hight{
        color: #fc5531;
    }
</style>
</head>
<body>
<@estitlelist pageNum=pageNum pageSize=pageSize keyword=keyword>
<div id="app">
    <#include "/include/daohang.html">

    <div>
        <div style="width: 500px;display: flex;align-items: center;height: 60px">
            <div style="padding-left: 15px">
                <el-autocomplete
                        style="width: 500px"
                        class="inline-input"
                        v-model="keyword"
                        :fetch-suggestions="querySearch"
                        placeholder="请输入内容"
                        @select="handleSelectKeyWord"
                >
                    <el-button slot="append" @click="searchnote" id="search-btn" icon="el-icon-search"></el-button>
                </el-autocomplete>
            </div>
            <div style="margin-left: 15px">
                <button class="el-button" @click="flushData">刷新数据</button>
            </div>
        </div>
        <br>

        <#if keyword?length gt 0>
        <div align="left" style="padding-left: 15px">
            <span>以下是包含${keyword}的所有结果</span>
        </div>
    </#if>

    <el-divider></el-divider>

    <div style="padding: 20px">


            <div class="item-list">
                <#list result.records as item>
                    <div class="item">
                        <a class="item-title" href="${item.contentUrl}" target="_blank">
                            ${item.title}
                            <span class="item-title-time">2024-04-22</span>
                        </a>
                        <div class="item-content">
                            <a>${item.hights}</a>
                        </div>
                        <div class="item-channel">
                            所属栏目: ${item.channelName}
                            <span class="item-tag">${item.tag}</span>
                        </div>
                    </div>
                </#list>
            </div>



            <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    layout="total,prev, pager, next"
                    :total="total"
                    :current-page="pageNum">
            </el-pagination>

    </div>
</div>
</div>
<#include "/include/commonjs.html">
<script>

    var Main = {
        extends: global,
        data() {
            return {
                restaurants: [],
                state: '',
                activeIndex: '1',
                activeIndex2: '100',
                total:${result.total},
                keyword: '${keyword}',
                pageNum: ${pageNum},
                pageSize: ${pageSize}
            }
        },
        created(){

        },
        methods: {
            flushData(){
                api.GET('/es/flush',{},(result)=>{
                    if(result.code===0){
                        this.$message('刷新成功');
                    }
                });
            },
            querySearch(queryString, cb) {
                api.GET('/no/note/keyword',{'keyword':queryString},(result)=>{
                    if(result.code===0){
                        var restaurants=result.data;
                        // 调用 callback 返回建议列表的数据
                        cb(restaurants);
                    }
                });
            },
            handleSelectKeyWord(item) {
                this.searchnote();
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            handleCurrentChange(val) {
                location.href="?pageNum="+val+"&pageSize="+this.pageSize+"&keyword="+this.keyword;
            },
            locationppreview(val){
                console.log(JSON.stringify(val))
                window.open(val.contentUrl);
                // window.open('/page/contentinfo.html?obj='+id)
            },
            searchnote(){
                this.pageNum=1;
                location.href="?pageNum="+this.pageNum+"&pageSize="+this.pageSize+"&keyword="+this.keyword;
            },
            loadAll() {
                return [
                    { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
                    { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
                ];
            },
        },
        mounted() {
            this.restaurants = this.loadAll();
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')

    function keyDown() {
        var keycode = event.keyCode;
        var realkey = String.fromCharCode(event.keyCode);
        if(keycode==13){
            $("#search-btn").click();
        }
        // alert("按键码: " + keycode + " 字符: "+ realkey);

    }
    document.onkeydown = keyDown;
</script>
</@estitlelist>
</body>
</html>